<template>
    <div>
      <ul>
        <!-- <router-link v-for="m in msgsList" :key="m.id" :to="`/home/messages/details/${m.id}/${m.name}`">{{ m.name }}</router-link> -->
        <!-- <router-link v-for="m in msgsList" :key="m.id" :to="{
          path: '/home/messages/details',
          params: {
            id: m.id,
            name: m.name
          }
        }">{{ m.name }}</router-link> -->
        <!-- <router-link replace v-for="m in msgsList" :key="m.id" :to="{
          name: 'details',
          params: {
            id: m.id,
            name: m.name
          }
        }">{{ m.name }}</router-link> -->
        <li v-for="m in msgsList" :key="m.id">
          <router-link replace :to="{
            name: 'details',
            query: {
              id: m.id,
              name: m.name
            }
          }">{{ m.name }}</router-link>
          <button @click="handlePush(m)">push</button>
          <button @click="handleReplace(m)">replace</button>
        </li>
      </ul>
      <hr>
      <router-view></router-view>
    </div>
  </template>
  
  <script>
  export default {
    name: 'MyMessages',
    data() {
      return {
        msgsList: [
          {
            id: '001',
            name: 'msg1'
          },
          {
            id: '002',
            name: 'msg2'
          },
          {
            id: '003',
            name: 'msg3'
          }
        ]
      }
    },
    methods: {
      handleReplace(m) {
        this.$router.replace({
          name: 'details',
          query: {
            id: m.id,
            name: m.name
          }
        }, () => {})
      },
      handlePush(m) {
        this.$router.push({
          name: 'details',
          query: {
            id: m.id,
            name: m.name
          }
        }, () => {})
      }
    },
    beforeDestroy() {
      console.log('Messages组件即将被销毁')
    }
  }
  </script>